<template>
  <div class="pic_wrap" v-bind:id="id" v-bind:data="data"></div>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      chartTemplate: null
    };
  },
  /* 深度监听,父组件刚开始传过来的值是没有数据的,只是图表的配置项,
  父组件进行ajax请求后改变数据的值,然后传递过来,就会发现图表已经生成
  (没有数据就生成了),所以子组件需要监听传过来的数据 */
  watch: {
    data: {
      handler(newVal, oldVal) {
        this.drawPie(this.id, newVal);
      },
      deep: true
    }
  },
  props: ["id", "data"],
  // mounted 是 vue 的生命周期，表示挂载完毕，html 已经渲染
  mounted() {
    //this.drawPie(this.id, this.data)
    // console.log(this.id, this.data)
    this.$nextTick(function() {
      this.drawPie(this.id, this.data);
    });
  },
  methods: {
    drawPie(id, data) {
      var _this = this;
      var myChart = document.getElementById(id);
      //基于准备好的dom,初始化echarts实例
      this.chartTemplate = this.$echarts.init(myChart);
      this.chartTemplate.setOption(data);
      window.addEventListener("resize", function() {
        _this.chartTemplate.resize();
      });
    }
  },
  beforeDestroy() {
    if (this.chartTemplate) {
      this.chartTemplate.clear();
    }
  }
};
</script>
